<template>
  <div>
    <file-upload-local
      v-if="conf.provider==='local'"
      v-model="fileUrl"
      :accept="accept"
      :tips="tips"
      :compress="compress"
      :list-type="listType" />

    <file-upload-oss
      v-if="conf.provider==='aliyun'"
      v-model="fileUrl"
      :accept="accept"
      :tips="tips"
      :compress="compress"
      :list-type="listType" />

    <file-upload-qiniu
      v-if="conf.provider==='qiniu'"
      v-model="fileUrl"
      :accept="accept"
      :tips="tips"
      :compress="compress"
      :list-type="listType" />

    <file-upload-cos
      v-if="conf.provider==='qcloud'"
      v-model="fileUrl"
      :accept="accept"
      :tips="tips"
      :compress="compress"
      :list-type="listType" />

  </div>
</template>

<script>

import { fetchDetail } from '@/api/sys/config/prop'
import FileUploadOss from './oss'
import FileUploadLocal from './local'
import FileUploadQiniu from './qiniu'
import FileUploadCos from '@/components/FileUpload/cos'

export default {
  name: 'FileUpload',
  components: { FileUploadCos, FileUploadQiniu, FileUploadLocal, FileUploadOss },
  props: {
    value: String,
    accept: {
      type: String,
      default: '*'
    },
    tips: String,
    listType: {
      type: String,
      default: 'picture'
    },
    compress: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      conf: '',
      fileUrl: ''
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler() {
        this.fillValue()
      }
    },

    // 检测查询变化
    fileUrl: {
      handler(val) {
        // 无值则表示清除
        this.$emit('input', val)
        if (val) {
          this.$emit('success', val)
        }
      }
    }
  },
  mounted() {
    // 查找配置
    this.fetchConfig()
  },

  created() {
    this.fillValue()
  },

  methods: {

    // 查找配置情况
    fetchConfig() {
      fetchDetail('upload', '').then(res => {
        this.conf = res.data
        console.log(this.conf)
      })
    },

    fillValue() {
      this.fileUrl = this.value
    }

  }
}
</script>

<style scoped>

/deep/
.el-upload-list--picture .el-upload-list__item-thumbnail{
  background: #969696 !important;
}
</style>
